<template>
  <div class="box">
    <div>
      <el-card class="box-card box-card-setconnect" shadow="always">
        <div slot="header" class="clearfix">
          <el-tag>设置连接</el-tag>
        </div>
        <div class="setting-card-connect">
          <div>
            <label>地址:</label>
            <el-input placeholder="请输入目标主机地址" v-model="inputUrl">
              <template slot="prepend">ws://</template>
            </el-input>
          </div>
          <div>
            <label>端口:</label>
            <el-input placeholder="请输入目标主机端口" v-model="inputPort">
              <template slot="prepend"></template>
            </el-input>
          </div>
          <div style="margin-top:10px">
            <el-button
              @click="setConnect"
              :type="buttontype[buttonStatus]"
            >{{ buttonText[buttonStatus] }}</el-button>
          </div>
          <div id="ShowUrl">
            <span>当前连接地址: {{ ShowUrl }}</span>
          </div>
          <div id="ShowStatus">
            <span>当前连接状态: {{ ShowStatus }}</span>
          </div>
        </div>
      </el-card>

      <el-card class="box-card box-card-setmode" shadow="always">
        <div slot="header" class="clearfix">
          <el-tag>设置模式</el-tag>
        </div>
        <div style="margin-top: 15px;">
          <el-input
            placeholder="请选择模式"
            v-model="seletorlabel[seletorvalue]"
            class="input-with-select"
          >
            <el-select v-model="seletorvalue" slot="prepend" placeholder="请选择">
              <el-option label="free" value="0" key="0"></el-option>
              <el-option label="gmapping" value="1" key="1"></el-option>
              <el-option label="navigation" value="2" key="2"></el-option>
              <el-option label="control" value="3" key="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-check" @click="btnSetmode(seletorvalue)"></el-button>
          </el-input>
        </div>
      </el-card>
    </div>

    <div>
      <el-card class="box-card box-card-nodelist" shadow="always">
        <div slot="header" class="clearfix">
          <el-tag>节点列表</el-tag>
          <!-- btnRefreshNode -->
          <el-button class="btnRefreshNode" @click="btnRefreshNode()" size="small">刷新</el-button>
        </div>
        <el-table :data="tabledata" stripe height="400px">
          <el-table-column prop="name" label="节点" width="300"></el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { reconnect, ros } from "../js/connect";
import { store } from "../state/store";
import {
  setmode,
  // ,getmode
} from "../js/mode";
import { getNodeList } from "../js/loadnode";

export default {
  data: function () {
    return {
      ShowUrl: "",
      ShowStatus: "",
      inputUrl: "",
      inputPort: "",
      // connect button
      buttonStatus: true,
      buttonText: {
        true: "connect",
        false: "disconnect",
      },
      buttontype: {
        true: "primary",
        false: "danger",
      },
      // node list
      tabledata: [],
      // set mode
      seletorvalue: 0,
      seletorlabel: {
        0: "free",
        1: "gmapping",
        2: "navigation",
        3: "control",
      },
    };
  },
  created() {
    var that = this;
    ros.on("connection", function () {
      console.log("ROS in Setting.vue: Connected to websocket server.");
      store.setStatusAction("Connected");
      that.ShowStatus = store.getStatusAction();
      that.turnOffButtonStatus();
      // 设置初始模式
      setmode(ros, 2);
    });

    ros.on("error", function (error) {
      console.log(
        "ROS in Setting.vue: Error connecting to websocket server: ",
        error
      );
      store.setStatusAction("Error");
      that.ShowStatus = store.getStatusAction();
      that.turnOnButtonStatus();
    });

    ros.on("close", function () {
      console.log("ROS in Setting.vue: Connection to websocket server closed.");
      store.setStatusAction("Closed");
      that.ShowStatus = store.getStatusAction();
      that.turnOnButtonStatus();
    });
  },
  mounted() {
    // console.log(store.getInputurlAction());
    this.inputUrl = store.getInputurlAction();
    this.inputPort = store.getInputportAction();
    this.ShowUrl = store.getUrlAction();
    this.ShowStatus = store.getStatusAction();
    if (this.ShowStatus == "Connected") {
      this.buttonStatus = false;
    }
    this.refreshNode();
  },
  destroyed() {},
  methods: {
    setConnect() {
      this.ShowUrl = "ws://" + this.inputUrl + ":" + this.inputPort;
      // 保存
      store.setUrlAction(this.ShowUrl);
      store.setInputportAction(this.inputPort);
      store.setInputurlAction(this.inputUrl);
      // 连接
      console.log("reset url:" + this.ShowUrl);
      reconnect(this.ShowUrl);
      // 刷新节点列表
      this.refreshNode();
    },
    btnSetmode(v) {
      console.log("setmode:" + v);
      setmode(
        ros,
        v,
        function (self) {
          self.$notify({
            title: "成功",
            message: "模式设置成功",
            type: "success",
          });
        },
        this
      );
    },
    btnRefreshNode() {
      this.refreshNode();
    },
    turnOnButtonStatus() {
      this.buttonStatus = true;
    },
    turnOffButtonStatus() {
      this.buttonStatus = false;
    },
    refreshNode() {
      getNodeList(ros, this, function (self, array) {
        for (var i = 0, l = self.tabledata.length; i < l; i++) {
          self.tabledata.pop();
        }
        for (i = 0, l = array.length; i < l; i++) {
          self.tabledata.push({
            name: array[i],
          });
        }
      });
    },
  },
};
</script>

<style>
.box-card-setmode,
.box-card-setconnect {
  width: 380px;
}

.box-card-nodelist {
  width: 350px;
  height: 580px;
}

.setting-card-connect {
  line-height: 40px;
  text-align: left;
}

.card-button {
  float: right;
  padding: 3px;
}

.btnRefreshNode {
  float: right;
}
</style>
